<template>
    <svg :class="svgClass" v-bind="$attrs">
        <use :href="iconName"></use>
    </svg>
</template>
<script setup>
const props = defineProps({
    name:{
        type:String,
        Required:true
    }
})

const iconName = computed(() => '#icon-'+props.name)
const svgClass = computed(() =>{
    if(props.name) return `svg-icon icon-${props.name}`
    return `svg-icon`
})
</script>
<style>
svg{
    width: 16px;
    height: 16px;
}
</style>